<template>
  <el-scrollbar height="300px">
    <!--    <div v-for="(item,index) in dataList" :key="item.name" @click="changeRecord(index)"-->
    <!--         :class="[{'active':activeIndex===index},'zoom-in','mb-2','box']">-->
    <!--      <div class="flex items-center border p-3">-->
    <!--        <img class="w-20 h-20" src="@/assets/images/food-beverage-1.jpg"/>-->
    <!--        <span class="ml-2">1号机组</span>-->
    <!--      </div>-->
    <!--      <p class="border border-t-0 p-3">最后记录：2024-11-12 10:00</p>-->
    <!--    </div>-->
    <div v-for="(item,index) in dataList" :key="item.name" @click="changeRecord(item,index)"
         :class="[{'active':activeIndex===index},'card','mb-5','zoom-in','p-6','mix-w-sm', 'mx-auto', 'bg-white', 'rounded-xl','flex','items-center','space-x-4']">
      <div class="flex-shrink-0">
        <font-awesome-icon style="font-size:3em; color: #ffb905" :icon="['fas', 'bolt-lightning']"/>
      </div>
      <div>
        <div class="text-xl font-medium text-block">1号机组</div>
        <p class="text-gray-500">最后记录：2024-11-12 10:00</p>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import {ref} from "vue";

const emit = defineEmits(['changeRecord']);
const dataList = ref([
  {
    name: "1号机组",
    value: "1234"
  },
  {
    name: "2号机组",
    value: "1234"
  },
  {
    name: "3号机组",
    value: "1234"
  },
  {
    name: "4号机组",
    value: "1234"
  },
  {
    name: "5号机组",
    value: "1234"
  },

]);
const activeIndex = ref(0);
const changeRecord = (item, index) => {
  activeIndex.value = index;
  emit('changeRecord', item);
}

</script>


<style scoped lang="scss">
//.card {
//  &:hover {
//    box-shadow: 0 0 10px #ccc;
//  }
//}
.card {
  width: 98%;
  -moz-box-shadow: 0px 0px 5px #cccccc;
  -webkit-box-shadow: 0px 0px 5px #cccccc;
  box-shadow: 0px 0px 5px #cccccc;
}

.active {
  background: #48c2ee;

  > div, p {
    color: #ffffff;
  }
}
</style>